<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div slot="header">
        <span>统计数据</span>
        <el-button type="success" class="bg-green" size="small" style="float: right;">导出数据</el-button>
      </div>
      <div class="header">
        <el-select v-model="searchTerms.status" placeholder="选择问卷" class="select" clearable @change="getData">
          <el-option :value="1" label="正在进行"/>
          <el-option :value="0" label="有结束"/>
          <el-option :value="-1" label="已过期"/>
        </el-select>
        <el-select v-model="searchTerms.status" placeholder="选择题号" class="select" clearable @change="getData">
          <el-option :value="1" label="正在进行"/>
          <el-option :value="0" label="有结束"/>
          <el-option :value="-1" label="已过期"/>
        </el-select>
      </div>
      <div v-for="(item,index) in chartData" :key="item" class="content margin-top-20">
        <div class="title">{{ index+1 }}. 這是題目這是題目這是題目這是題目?</div>
        <div class="value">
          <el-table v-loading="tableLoading" :data="item['data']" :max-height="tableMaxHeight" @sort-change="handleSortChange">
            <el-table-column prop="name" label="选项" width="100"/>
            <el-table-column prop="label" label="内容" min-width="160"/>
            <el-table-column prop="name" label="小计" width="140" header-align="center" align="center"/>
            <el-table-column prop="buy_time" label="百分比" width="200" header-align="center" align="center">
              <template slot-scope="scope">
                {{ parseTime(scope.row['buy_time'], '{y}-{m}-{d}') }}
              </template>
            </el-table-column>
          </el-table>
          <pie-chart :chart-data="item" class="margin-top-20"/>
        </div>
      </div>
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        class="pagination"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"/>
    </el-card>
  </div>
</template>

<script>
import PieChart from './components/PieChart'
import { handleSortChange, handleSizeChange, handleCurrentChange, parseTime } from '@/utils/table'
export default {
  components: {
    PieChart
  },
  data() {
    return {
      searchTerms: {
        type: 0,
        state: 0,
        showType: 0
      },
      chartData: [{
        'title': '這是題目這是題目這是題目這是題目',
        'data': [
          { value: 335, name: '选项一', label: '选项一选项一选项一' },
          { value: 310, name: '选项二', label: '选项一选项一选项一' },
          { value: 234, name: '选项三', label: '选项一选项一选项一' }
        ]
      }, {
        'title': '這是題目這是題目這是題目這是題目',
        'data': [
          { value: 335, name: '选项一', label: '选项一选项一选项一' },
          { value: 310, name: '选项二', label: '选项一选项一选项一' },
          { value: 234, name: '选项三', label: '选项一选项一选项一' }
        ]
      }],
      form: {
        way: []
      },
      // 表格相关数据
      tableMaxHeight: document.documentElement.clientHeight - 380,
      tableLoading: false,
      currentPage: 1,
      pageSize: 5,
      pageSizes: [5, 10, 50, 100],
      total: 0
    }
  },
  watch: {},
  created() {
    this.id = this.$route.query.id
    this.getData()
  },
  methods: {
    handleCurrentChange, handleSizeChange, handleSortChange, parseTime,
    getData(order) {
      this.tableLoading = true
      order || (order = {})
      const url = 'achievement/list'
      const data = {
        page_no: this.currentPage,
        page_size: 4,
        search: this.searchTerms.searchValue,
        status: this.searchTerms.status,
        type: this.searchTerms.type
      }
      this.searchTerms.date && this.searchTerms.date.length !== 0 && (data.start_time = this.searchTerms.date[0] + ' 00:00:00', data.end_time = this.searchTerms.date[1] + ' 23:59:59')
      order.sortName && (data.sortName = order.sortName)
      order.sortOrder && (data.sortOrder = order.sortOrder)
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.tableData = res.data.rows
        this.tableLoading = false
      }).catch(e => {
        this.tableLoading = false
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },
    /**
     *  增加题目
     *  接口:'user/all-list'
     */
    toAddQuestion() {
      this.form['question'].reverse()
      this.form['question'].push({
        title: '',
        type: 0,
        questionType: 0,
        optionsType: 0,
        options: [{ value: '' }]
      })
      this.form['question'].reverse()
    },

    toAddQuestionOptions(index) {
      this.form['question'][index]['options'].push({ value: '' })
    },

    toDeleteQuestionOptions(index, optionsIdx) {
      this.form['question'][index]['options'].splice(optionsIdx, 1)
    },

    toDeleteQuestion(index) {
      this.form['question'].splice(index, 1)
    },

    /**
       *  获取系统用户列表
       *  接口:'user/all-list'
       */
    getUsersList() {
      const url = 'user/all-list'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.usersList = res.data
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = this.form
          data.sale_proof = data.pic_list
          const url = 'achievement/edit/' + this.id
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg)
            this.$router.back(-1)
          }).catch((err) => {
            this.$message.error(err.msg)
          })
        } else {
          this.$message.error('提交失败,请检查必填项')
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../styles/index.scss';

  .box-1 {
    max-width: 1000px;
    margin: 0 auto;

    > div span {
      font-size: 18px;
      font-weight: 600;
      padding: 0 10px;
    }

    .header {
      padding-bottom: 15px;

      .select {
        padding-right: 15px;
        width: 150px;
      }

      .picker {
        margin-right: 15px;
        width: 300px;
      }
    }

    .content{
      .title{
        margin-bottom: 20px;
      }
      .value{
        padding: 10px 30px;
      }
    }
  }

  .margin-top-20{
    margin-top: 40px;
  }

  .el-checkbox {
    margin-right: 30px;
  }

  .el-checkbox + .el-checkbox {
    margin-left: 0;
    margin-right: 30px;
  }
</style>
